<template>
	<img src="res/ui/colorNone.png" width="800" height="600" @click="walk" @rightclick="run"></img>
	<ani @bind="roleNode" :src="info.src" @complete="rolePlayComplete" loop="true" :speed="info.speed" x="375" y="260">
		<txt :text="info.name" :x="nameXY.x" :y="nameXY.y" :size="nameSize" color="#FFFFFF"></txt>
	</ani>
</template>

<script>
data(){
	return {//减少系统开销,只对已定义的对象做监听处理,如需监听新对象,需定义一个初始值,子集定义了啥监听啥,不定义子集不做监听处理
		info: {
			name: "『凯哥』",
			level: 255,
			status: 0,//0站立 1行走 2跑步 3物理 4魔法 5死亡
			dir: 4,//移动方向
			body: 3,//人物外观,主要用于区分多个资源
			src: "res/ani/3/man_0_4.json",
			step: 1,//每次点击移动距离 步伐数
			mapId: 3,//地图代码
			x: 185,//地图坐标
			y: 95,//地图坐标
			speed: 4,//人物动画播放速度
		},
		nameSize: 14,
		nameXY: {
			x: 10,
			y: 20
		},
		arr: [],//注意数组不做监听处理 自行转对象
		roleNode: null//绑定对象为浅拷贝PIXIJS原生属性.  (浅拷贝类似于C++的变量指针地址)
	}
}

create() {
	console.log("player create");
	this.nameSize = 14;
	this.nameXY.x = 10;
	this.nameXY.y = 25;
	map.loadMap(this.info.mapId, this.info.x, this.info.y);
}

update(delta) {

}

walk(event) {
	console.log("role walk");
	this.info.dir = this.getDir(event.x, event.y);
	this.info.step = 1;
	this.info.status = 1;
	this.roleMove();//开始移动
}

run(event) {
	console.log("role run");
	this.info.dir = this.getDir(event.x, event.y);
	this.info.step = 2;
	this.info.status = 2;
	this.roleMove();//开始移动
}

roleMove(){//人物移动 实则背景地图在移动 此类只负责传递 移动方向跟格子数量 具体地图移动坐标在 地图类完成
	this.info.src = "res/ani/" + this.info.body + "/man_"+ this.info.status +"_"+ this.info.dir +".json";
	this.info.speed = 12;
	if(this.info.dir == 0){
		map.roleMove(0, this.info.step);
	}else if(this.info.dir == 1){
		map.roleMove(-this.info.step, this.info.step);
	}else if(this.info.dir == 2){
		map.roleMove(-this.info.step, 0);
	}else if(this.info.dir == 3){
		map.roleMove(-this.info.step, -this.info.step);
	}else if(this.info.dir == 4){
		map.roleMove(0, -this.info.step);
	}else if(this.info.dir == 5){
		map.roleMove(this.info.step, -this.info.step);
	}else if(this.info.dir == 6){
		map.roleMove(this.info.step, 0);
	}else if(this.info.dir == 7){
		map.roleMove(this.info.step, this.info.step);
	}
}

rolePlayComplete(){
	if(this.info.status == 1 || this.info.status == 2){//人物移动动画完成恢复站立姿势
		this.info.status = 0;
		this.info.src = "res/ani/" + this.info.body + "/man_"+ this.info.status +"_"+ this.info.dir +".json";
		this.info.speed = 4;
	}
}

getDir(x, y) {//取人物朝向  8方向
	let roleX = 400;//this.roleNode.x
	let roleY = 300;//this.roleNode.y
	let angle = Math.atan2(x - roleX, y - roleY);
	angle = angle * (180/Math.PI) + 180; //0->7逆时针360 每个方向占45度  22.5 - 342.5  =  0方向
	if(angle <= 22.5 || angle > 337.5) {
		return 0;//上
	} else if(angle <= 337.5 && angle > 292.5) {
		return 1;//右上
	} else if(angle <= 292.5 && angle > 247.5) {
		return 2;//右
	} else if(angle <= 247.5 && angle > 202.5) {
		return 3;//右下
	} else if(angle <= 202.5 && angle > 157.5) {
		return 4;//下
	} else if(angle <= 157.5 && angle > 112.5) {
		return 5;//左下
	} else if(angle <= 112.5 && angle > 67.5) {
		return 6;//左
	} else if(angle <= 67.5 && angle > 22.5) {
		return 7;//左上
	}
}

destroyed() {
	
}

</script>